<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#big{
				width: 800px;
				height: 800px;
				border: 1px solid black;
				position: relative;
			}
			#small{
				width: 100px;
				height:100px;
				background-color: gray;
				border-radius:50%;
				position: absolute;
			}
			#small2{
				width: 100px;
				height: 100px;
				background-color: green;
				border-radius:50%;
				position: absolute;
				top: 300px;
				left: 300px;
			}
		</style>
	</head>
	<body>
		<div id="big">
			<div id="small"></div>
			<div id="small2"></div>
		</div>
	</body>
	<script type="text/javascript">
		var big = document.getElementById('big');
		var small = document.getElementById('small');
		var small2 = document.getElementById('small2');
//		small.onmousedown = function(event){
//			var x = event.clientX - small.offsetLeft;
//			var y = event.clientY - small.offsetTop;
			
//			Math.sqrt()
			
			
//			document.onmousemove = function(event){
//				var _x = event.clientX;
//				var _y = event.clientY;
//				small.style.left = _x - x + "px";
//				small.style.top = _y - y +"px";
//				if((small.offsetLeft + small.offsetWidth )>=small2.offsetLeft &&(small2.offsetLeft + small2.offsetWidth )>=small.offsetLeft &&(small.offsetTop + small.offsetHeight )>=small2.offsetTop &&(small2.offsetTop + small2.offsetHeight )>=small.offsetTop){
//					small2.style.backgroundColor = 'yellow';
//				}else{
//					small2.style.backgroundColor = 'green';
//				}
//			}
//		}
//		document.onmouseup = function(){
//			document.onmousemove = "";
//		}



		small.onmousedown = function(event){
			var x = event.clientX - small.offsetLeft;
			var y = event.clientY - small.offsetTop;		
		document.onmousemove = function(event){
				var _x = event.clientX;
				var _y = event.clientY;
				small.style.left = _x - x + "px";
				small.style.top = _y - y +"px";
				var a = small2.offsetTop+small2.offsetHeight/2-small.offsetTop-small.offsetHeight/2;
				var b = small2.offsetLeft+small2.offsetWidth/2-small.offsetLeft-small.offsetWidth/2;
				var c = small.offsetWidth/2 + small2.offsetWidth/2;
				if(a*a+b*b<c*c){
					small2.style.backgroundColor = 'yellow';
				}else{
					small2.style.backgroundColor = 'green';
				}
			}
		}
		document.onmouseup = function(){
			document.onmousemove = "";
		}
	</script>
</html>
